import { FC, useEffect, useMemo, useRef } from 'react';
import './progress.css';
import { useTheme } from '@/store/settingsStore.ts';
import { style, ThemeMode } from '@ycx/ui';

interface ProgressRingProps {
  total: number;
  activeTime: number;
}

const ProgressRing: FC<ProgressRingProps> = ({ total, activeTime }) => {
  const progressRef = useRef<SVGCircleElement | null>(null);
  const theme = useTheme();

  const isLight = useMemo(() => {
    return theme === ThemeMode.Light;
  }, [theme]);

  useEffect(() => {
    if (progressRef.current) {
      setProgress((activeTime / total) * 100);
    }
  }, [total, activeTime]);

  const setProgress = (percent: number): void => {
    const circle = progressRef.current;
    if (circle) {
      const radius = circle.r.baseVal.value;
      const circumference = radius * 2 * Math.PI;
      const offset = circumference - (percent / 100) * circumference;
      circle.style.strokeDasharray = `${circumference} ${circumference}`;
      circle.style.strokeDashoffset = `${offset}`;
    }
  };

  return (
    <div className="progress-ring">
      <svg className="progress-ring-circle" width="120" height="120" viewBox="0 0 120 120">
        <circle
          stroke={isLight ? style.neutralColorChartBgLight : style.neutralColorChartBgtDark}
          strokeWidth="4"
          fill="transparent"
          r="52"
          cx="60"
          cy="60"
        />
        <circle
          ref={progressRef}
          className="progress"
          stroke="url(#gradient)"
          strokeWidth="12"
          strokeLinecap="round"
          fill="transparent"
          r="52"
          cx="60"
          cy="60"
        />
        <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#4C68FF" />
            <stop offset="100%" stopColor="#3FFEFF" />
          </linearGradient>
        </defs>
      </svg>
      <div className="progress-ring-text">
        <div className="progress-ring-number">{total}</div>
        <div className="progress-ring-label">总次数</div>
      </div>
    </div>
  );
};

export default ProgressRing;
